<template>
  <div class="orderCont" :style="'min-height: '+docheight+'px'">
    <div v-if="!showTimeOut&&showCont">
      <div class="orderHead">
        <serch-com placher="请输入订单商品名称" @serchClick="serchFn" color="#e95551"></serch-com>
        <div class="orderTop">
          <div class="orderNav">
            <div :class="stepId==item.id?'navItem_active':'navItem'" @click="navFn(item)" :key="index" v-for="(item,index) in navArr">{{item.val}}</div>
          </div>
        </div>
      </div>
      <div class="orderList" v-if="orderList.length>0">
        <div class="orderItem" :key="index" v-for="(item,index) in orderList">
          <div class="shopTop">
            <div class="shopNameCont">
              <div class="shopName">订单号:{{ item.order_number }}</div>
            </div>
            <div class="orderStatus">
              <span class="redText" v-if="item.order_status==1">待付款</span>
              <span class="blueText" v-if="item.order_status==2">待使用</span>
              <span class="greenText" v-if="item.order_status==3">已完成</span>
              <span class="blackText" v-if="item.order_status==4">已关闭</span>
              <span class="blackText" v-if="item.order_status==5">已退款</span>
              <span class="goldText" v-if="item.order_status==6">拼团中</span>
            </div>
          </div>
          <div class="goodsList">
            <div class="goodsItem" :key="index2" v-for="(item2,index2) in item.goods_info" @click="toDetail(item)">
              <div class="goodsImg">
                <img :src="item2.goods_image+ossSrc">
                <div class="groupTag" v-if="item.order_lx==2">
                  <div>拼团</div>
                </div>
              </div>
              <div class="goodsInfo">
                <div class="goodsName">{{ item2.goods_name }}</div>
                <div class="goodsType">
                  <div class="goodsTypeItem">商品数量：x{{ item2.num }}</div>
                </div>
                <div class="goodsInfoPrice">
                  <div>商品总价:¥{{ item2.goods_total }}</div>
                  <!-- <div>x{{ item2.num }}</div> -->
                </div>
              </div>
            </div>
          </div>
          <div class="orderAllMoney">结算金额:¥{{ item.order_total_price }}</div>
          <div class="goodsCtrl">
            <div class="orderBtn greenBtn" v-if="item.order_status==1" @click="showPayFn(item)">立即支付</div>
            <div class="orderBtn blackBtn" v-if="item.order_status==1||item.order_status==2" @click="ctrlFn(item,1,index)">取消订单</div>
            <div class="orderBtn blackBtn" @click="ctrlFn(item,2,index)" v-if="item.order_status==3||item.order_status==4">删除订单</div>
          </div>
          <div class="orderDes" v-if="item.order_status==5">
            <div>退款金额：{{ item.refund_money }} </div>
            <div>退款说明：{{ item.close_reason }}</div>
          </div>
        </div>
      </div>
      <div class="loadMore" v-if="isChageNav">数据请求中~</div>
      <div class="loadMore" v-if="orderList.length>0&&!isChageNav">{{ loadMoreText }}</div>
      <nodata v-if="orderList.length==0&&!isChageNav" text="暂无该类订单~"></nodata>
      <van-popup v-model:show="showConfirm" round position="bottom">
        <div class="orderMask">
            <div class="maskTitle">{{ maskTitle }}</div>
            <div class="maskTip">{{ maskTipCont }}</div>
            <div class="maskTip Money">{{ maskTipMoney }}</div>
            <saveBtn color="#e95551" style="width: 100%;margin-top: 0.75rem;" :value="maskBtnCont" @saveClick="sureMask"></saveBtn>
        </div>
      </van-popup>
      <van-popup v-model:show="payMask" round position="bottom">
        <div class="orderMask">
          <div class="payType">
            <div class="moneyText">¥<span>{{ payItem.order_total_price }}</span></div>
            <div class="payTop">支付方式</div>
                <div class="payItem" @click="payNavFn(index)" :key="index" v-for="(item,index) in checkPay">
                    <div :class="'payTypeIcon iconfont '+item.icon"></div>
                    <div class="payName">{{item.val}}<span v-if="index==1">（¥{{ endMoney }}）</span></div>
                    <div :class="payId==index?'payCheck iconfont icon-gouxuan1':'unpayCheck payCheck iconfont icon-gouxuan1'"></div>
                </div>
            </div>  
            <saveBtn color="#e95551" style="width: 100%;margin-top: 0.75rem;" value="立即支付" @saveClick="payFn"></saveBtn>
        </div>
      </van-popup>
    </div>
    <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
    <sub-load v-if="showLoad"></sub-load>
    <footcpm></footcpm>
  </div>
</template>

<script>
import nodata from '@/components/public/nodata'
import serchCom from '@/components/public/serchCom.vue'
import footcpm from '@/components/footcpm'
import SaveBtn from "@/components/public/saveBtn.vue";
import WeixinJSBridge from 'weixin-js-sdk'

import { balanceRechargeShow,orderList,orderCancel,orderPay,orderDel,orderCancelMsg } from '@/http/api'
import {Toast,Confirm } from 'vux'
import getLoad from '@/components/public/getLoad'
import subLoad from '@/components/public/subLoad.vue'

import getTimeOut from '@/components/public/getTimeOut'
export default {
  components:{SaveBtn,footcpm,subLoad,getLoad,getTimeOut,nodata,serchCom,Toast,Confirm},
  data(){
    return{
      loadMoreText:'数据加载中~',
      isChageNav:false,
      showLoad:false,
      showTimeOut: false,
      showCont:true,
      navArr:[
        {val:'全部',id:0},
        {val:'待付款',id:1},
        {val:'拼团中',id:6},
        {val:'待使用',id:2},
        {val:'已完成',id:3},
      ],
      showText:'',
      showToast:false,
      serchKey:'',
      stepId:0,
      per_page:10,
      page:1,
      orderList:[],
      
      showConfirm:false,
      activeOrder:{},
      activeIndex:0,
      ctrlIndex:0,
      // 分页
      getting:false,
      last_page:0,
      maskTitle:'',
      maskTipCont:'',
      maskTipMoney:'',
      maskBtnCont:'',
      payMask:false,
      checkPay:[
        {val:'微信支付',icon:'icon-weixin'},
        {val:'余额支付',icon:'icon-yuebao'},
      ],
      payId:0,
      payItem:{},
      endMoney:0,
    }
  },
  methods:{
    payNavFn(index){
        this.payId = index
    },
    showPayFn(item){
      this.payMask = true
      this.payItem = item
    },
    payFn(){
      let item = this.payItem
      let data = {
        order_id:item.order_id,
        order_pay_type:this.payId+1,
      }
      if(Number(this.endMoney)<Number(item.order_total_price)&&this.payId==1){
        this.showToast = true
        this.showText = '余额不足'
        return false
      }
      if(!this.showLoad){
        this.showLoad = true
        orderPay(data).then((res)=>{
          this.showLoad = false
          if(res.data.code==1){
            if(this.payId==1){
              this.showToast = true
              this.showText = '支付成功'
              this.payMask = false
              return false
            }
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
              appId: res.data.data.appId,   //公众号ID，由商户传入    
              timeStamp: res.data.data.timeStamp,   //时间戳，自1970年以来的秒数    
              nonceStr: res.data.data.nonceStr,      //随机串    
              package: res.data.data.package,
              signType: res.data.data.signType,     //微信签名方式：    
              paySign: res.data.data.paySign, //微信签名
          },
          (resData)=>{
              if (resData.err_msg == "get_brand_wcpay_request:ok") {
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                  this.showToast = true
                  this.showText = '支付成功'
                  this.page = 1
                  this.last_page = 0
                  this.payMask = false
                  this.orderList = []
                  this.getData()
              }else{
                  this.showToast = true
                  this.showText = '支付失败'
              }
          })
          }else{
            this.showToast = true
            this.showText =res.data.msg
          }
        }).catch((err)=>{
          console.log(err)
          this.showLoad = false
          this.showToast = true
          this.showText = '网络请求超时'
        })
      }
    },
    ctrlFn(item,num,index){
      this.ctrlIndex = num
      this.activeIndex = index
      this.activeOrder = item
      if(num==1){
        if(item.order_status!=1){
          this.maskTitle = '取消订单提示'
          this.maskBtnCont = '确认取消'
          this.getCancelMsg(item)
        }else{
          this.canceFn(item)
        }
      }else if(num==2){
        this.maskTitle = '删除订单提示'
        this.maskTipCont = '确定要删除此订单吗？订单删除后将无法恢复。'
        this.maskBtnCont = '确认删除'
        this.showConfirm = true
      }
    },
    sureMask(){
      if(this.ctrlIndex == 1){
        this.canceFn(this.activeOrder)
      }else if(this.ctrlIndex ==2){
        this.delFn(this.activeOrder)
      }
    },
    getCancelMsg(item){
      let data ={
        order_id:item.order_id
      }
      orderCancelMsg(data).then((res)=>{
          if(res.data.code==1){
            this.maskTipCont = '退款说明：'+res.data.data.msg
            this.maskTipMoney = '退款金额：'+res.data.data.money+'元'
            this.showConfirm = true
          }else{
            this.showToast = true
            this.showText = res.data.msg
          }
          this.showLoad = false
        }).catch(()=>{
          this.showLoad = false
          this.showToast = true
          this.showText = '网络请求超时'
        })
    },
    delFn(item){
      let data ={
        order_id:item.order_id
      }
      this.showConfirm = false
      if(!this.showLoad){
        this.showLoad = true
        orderDel(data).then((res)=>{
          if(res.data.code==1){
            this.orderList.splice(this.activeIndex,1)
            this.showToast = true
            this.showText = '订单删除成功'
          }else{
            this.showToast = true
            this.showText = res.data.msg
          }
          this.showLoad = false
        }).catch(()=>{
          this.showLoad = false
          this.showToast = true
          this.showText = '网络请求超时'
        })
      }
    },
    canceFn(item){
      let data ={
        order_id:item.order_id
      }
      if(!this.showLoad){
        this.showLoad = true
        orderCancel(data).then((res)=>{
          if(res.data.code==1){
            if(this.stepId==0){
              if(item.order_status==1){
                item.order_status=4
              }else{
                item.order_status=5
                item.close_reason = this.maskTipCont.split('退款说明：')[1]
                item.refund_money = this.maskTipMoney.split('退款金额：')[1]
                this.showConfirm = false
              }
            }else{
              this.orderList.splice(this.activeIndex,1)
            }
            this.showToast = true
            this.showText = '订单取消成功'
          }else{
            this.showToast = true
            this.showText = '订单取消失败'
          }
          this.showLoad = false
        }).catch(()=>{
          this.showLoad = false
          this.showToast = true
          this.showText = '网络请求超时'
        })
      }
    },
    serchFn(val){
      this.serchKey = val
      this.page = 1
      this.last_page = 0
      this.orderList = []
      this.getData()
    },
    navFn(item){
      this.stepId = item.id
      this.orderList = []
      this.page = 1
      this.getData()
    },
    toDetail(item){
      this.$router.push({path:'/orderDetail',query:{id:item.order_id}})
    },
    getData(){
      let data ={
        order_status:this.stepId,
        goods_name:this.serchKey,
        per_page:this.per_page,
        page:this.page,
      }
      this.isChageNav = true
      orderList(data).then((res)=>{
        if(res.data.code==1){
          let arr = res.data.data.data
          for(let i=0;i<arr.length;i++){
            this.orderList.push(arr[i])
          }
          setTimeout(() => {
            this.getting = false
          }, 100);
          this.last_page = res.data.data.last_page
          if(this.page==this.last_page){
            this.loadMoreText = '到底啦～'
          }else{
            this.loadMoreText = '数据加载中~'
          }
        }else{
          this.showToast = true
          this.showText = '订单获取失败'
        }
        this.showCont= true
        this.isChageNav = false

      }).catch(()=>{
        this.showCont = true
        this.showTimeOut = true
      })
    },
    nextfn(){
      if(this.$route.path == '/order'){
        let h = document.documentElement.scrollHeight||document.body.scrollHeight
        let wh = document.documentElement.clientHeight||document.body.clientHeight
        let top = document.documentElement.scrollTop||document.body.scrollTop
        let bottom = h-wh-top
        if(bottom<=50){
          if(this.getting==false){
            if(this.last_page>this.page){
              this.getting=  true
              this.page++
              this.getData()
            }
          }
        }
      }
    },
    getMenberList(){
      balanceRechargeShow().then((res)=>{
        if(res.data.code==1){
          this.endMoney = res.data.data.balance
        }else{
          this.showToast = true
          this.showText = res.data.msg
          }
      }).catch(()=>{
          this.showTimeOut = true
          this.showCont= true
        })
    },
  },
  mounted() {
    window.addEventListener('scroll',this.nextfn)
  },
  created() {
    this.getData()
    this.getMenberList()
  }
}
</script>

<style scoped lang="less">
.orderCont{
  width: 100%;
  background-color: #f9f1f1;
  box-sizing: border-box;
  padding-bottom: 3.25rem;
  padding-top: 6.5rem;
  .orderHead{
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    
    .orderTop{
      width: 100%;
      padding: 0 4%;
      box-sizing: border-box;
      background-color: #fff;
      .orderNav{
        width: 100%;
        display: flex;
        position: relative;
        justify-content: space-between;
        .navItem,.navItem_active{
          width: 25%;
          text-align: center;
          padding: 0.75rem;
          box-sizing: border-box;
          font-size: 0.7rem;
          color: #666;
          white-space: nowrap;
        }
        .navItem_active{
          color: #e95551;
          border-bottom: 1px solid #e95551;
        }
      }
    }
  }
  .orderList{
    width: 100%;
    padding: 0.25rem 4%;
    box-sizing: border-box;
    .orderItem{
      width: 100%;
      background-color: #fff;
      margin-bottom: 0.75rem;
      border-radius: 0.25rem;
      padding: 0 0.75rem 1rem;
      box-sizing: border-box;
      .shopTop{
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        .shopNameCont{
          flex: 1;
          width: 0.5rem;
          display: flex;
          padding: 0.75rem 0;
          align-items: center;
          margin-right: 0.5rem;
          .shopicon{
            font-size: 1.1rem;
            margin-right: 0.25rem;
          }
          .shopName{
            font-size: 0.7rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .icon-jinrujiantou{
            font-size: 0.8rem;
            position: relative;
          }
        }
        .orderStatus{
          font-size: 0.6rem;
          .redText{
            color: #f9406e;
          }
          .greenText{
            color: #85CE61;
          }
          .blackText{
            color: #666;
          }
          .blueText{
            color: #96A1FE;
          }
          .goldText{
            color: goldenrod;
          }
        }
      }
      .goodsList{
        width: 100%;
        .goodsItem{
          width: 100%;
          margin-bottom: 0.75rem;
          display: flex;
          align-items: center;
          .goodsImg{
            width: 4rem;
            height: 4rem;
            overflow: hidden;
            border-radius: 0.25rem;
            margin-right: 0.5rem;
            position: relative;
            .groupTag{
              position: absolute;
              top: 0;
              left: 0;
              font-size: 0.6rem;
              padding: 0.1rem 0.35rem;
              background-color: #e95551;
              color: #fff;
              border-radius: 0 0 0.25rem 0;
              div{
                transform: scale(0.8);
              }
            }
            img{
              width: 100%;
            }
          }
          .goodsInfo{
            width: 0.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 4rem;
            justify-content: space-between;
            .goodsName{
              width: 100%;
              line-height: 1rem;
              font-size: 0.7rem;
              overflow: hidden; //超出的文本隐藏
              text-overflow: ellipsis; //溢出用省略号显示
              white-space: nowrap;
            }
            .orderTime{
              font-size: 0.6rem;
              color: #666;
            }
            .goodsType{
              display: flex;
              align-items: center;
              justify-content: space-between;
              .goodsNumCont{
                display: flex;
                height: 1rem;
                line-height: 1rem;
                color: #999;
                font-size: 0.6rem;
                align-items: center;
              }
              .goodsTypeItem{
                padding:0.1rem 0.5rem;
                background-color: #f9f1f1;
                font-size: 0.6rem;
                height: 1rem;
                line-height: 1rem;
                border-radius: 0.75rem;
                color: #e95551;
              }
            }
            .goodsInfoPrice{
              color: #999;
              font-size: 0.6rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .allItemMoney{
                color: #e95551;
              }
            }
          }
        }
      }
      .orderAllMoney{
        color: #e95551;
        text-align: right;
        font-size: 0.6rem;
        margin: 0.75rem 0;
      }
      .orderSumCont{
        font-size: 0.6rem;
        text-align: right;
        color: #333;
        .priceVal{
          position: relative;
          top: 0.1rem;
          color: #e95551;
        }
      }
      .orderTip{
        font-size: 0.6rem;
        color: #999;
        text-align: right;
        margin-top: 0.5rem;
      }
      .goodsCtrl{
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 0.75rem;
        justify-content: flex-end;
        .orderBtn{
          padding: 0.35rem 0;
          width: 25%;
          text-align: center;
          border-radius: 1rem;
          font-size: 0.6rem;
          box-sizing: border-box;
          margin-left: 0.5rem;
        }
        .greenBtn{
          border: 1px solid #e95551;
          color:#e95551;
        }
        .pinkBtn{
          border: 1px solid #e95551;
          color: #e95551;
        }
        .blackBtn{
          border: 1px solid #999;
          color: #666;
        }
      }
      .orderDes{
        border-top: 1px dashed #ebebeb;
        padding-top: 0.75rem;
        color: #666;
        font-size: 0.6rem;
      }
    }
  }
  .loadMore{
    text-align: center;
    padding: 0.75rem 0;
    font-size: 0.6rem;
    color: #e95551;
  }
  .orderMask{
  padding: 0.75rem;
  box-sizing: border-box;
  .maskTitle{
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
  }
  .maskTip{
    margin-top: 0.5rem;
    line-height: 1.1rem;
  }
  .payType{
        width: 92%;
        margin: 0 auto;
        border-radius: 0.25rem;
        padding: 0.75rem 4%;
        background-color: #fff;
        box-sizing: border-box;
        // margin-top: 1.5rem;
        .moneyText{
          // font-weight: bold;
          text-align: center;
          margin-bottom: 0.75rem;
          font-size: 1rem;
          span{
            margin-left: 0.25rem;
            font-size: 1.5rem;
          }
        }
        .payTop{
        font-size: 0.8rem;
        font-weight: bold;
        }
        .payItem{
        width: 100%;
        display: flex;
        box-sizing: border-box;
        margin-top: 0.75rem;
        align-items: center;
        display: flex;
        .payName{
            flex: 1;
            width: 0.5rem;
            font-size: 0.7rem;
            margin: 0 0.75rem;
            color: #999;
        }
        .payTypeIcon{
            font-size: 1.5rem;
            color: #28C445;
        }
        .icon-yuebao{
            color: #c9a96a;
        }
        .payCheck,.unpayCheck{
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background-color:#e95551;
            color: white;
            font-size: 0.7rem;
            text-align: center;
            line-height: 1rem;
        }
        .unpayCheck{
            background-color: rgb(230,230,230);
        }
        }
    }
}
}
</style>
